<template>
	<view>
		<view class="box">
			<view class="titlebox">
				选择家庭成员
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"  @scroll="scroll">
				<view class="scroll-view-item" v-for="(item,index) in list" :key="index" @click="addlist(item,index)">
					<view><text>{{item.name}}</text><text>{{item.mobile||''}}</text></view>
					<image v-if="personlist.indexOf(item)==-1" src="../static/yuan.png"></image>
					<image v-else src="../static/gou.png"></image>
				</view>
			</scroll-view>
			<view style="height: 135rpx;"></view>
			<view class="navbut">
				<view class="addbut" @click="toaddfamily()">新增成员</view>
				<view class="sure" @click="handlesure()">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bottompopup",
		// props:{
		// 	list:{
		// 		type:Array,
		// 		default:[]
		// 	}
		// },
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				personlist:[],
				list:[],
				// numberlist:[{name:'小甜甜',id:1},{name:'钱多多',id:2},{name:'豆子',id:3}]
			};
		},
		onReady() {
			// this.getfamily()
		},
		methods:{
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//多选
			addlist(item,index){
				if(this.personlist.indexOf(item)==-1){
					this.personlist.push(item)
				}else{
					const c = this.personlist.findIndex(sitem => sitem==item)
					this.personlist.splice(c,1)
				}
				console.log(this.personlist)
			},
			toaddfamily(){
				uni.navigateTo({
					url:'/pages/familyinfo/familyinfo'
				})
			},
			handlesure(){
				if(this.personlist.length==0){
					uni.showToast({
						title:'请选择或新增家庭成员',
						icon:'none'
					})
					return
				}
				this.$emit('handlesure',this.personlist)
			},
			getfamily(){
				this.$http({
					url:'/api/course/family_list',
				}).then(res=>{
					this.list = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 750rpx;
		min-height: 600rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		.titlebox{
			text-align: center;
			height: 120rpx;
			width: 100%;
			line-height: 120rpx;
			border-bottom: solid 2rpx #DBDBDB;
		}
		.scroll-Y {
			height: 460rpx;
			.scroll-view-item {
				width: 690rpx;
				padding: 0 30rpx;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.navbut{
			width: 100%;
			height: 130rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			position: fixed;
			bottom: 0;
			.addbut{
				width: 324rpx;
				height: 84rpx;
				border-radius: 83rpx;
				border: 2rpx solid #FF8A9B;
				background-color: #FFF;
				color: #FF8A9B;
				line-height: 84rpx;
				text-align: center;
			}
			.sure{
				width: 324rpx;
				height: 84rpx;
				background: #FF8A9B;
				border-radius: 83rpx;
				border: 2rpx solid #FF8A9B;
				color: #FFF;
				line-height: 84rpx;
				text-align: center;
			}
		}
	}

</style>